<%--
  Created by IntelliJ IDEA.
  User: Natural-Pride
  Date: 2023/12/17
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <%--天气插件--%>
    <div id="he-plugin-simple"></div>
    <title>全国主要城市天气查询后台管理</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
</head>
<body style="margin-top: 30px">
<h1 align="center" style="margin-bottom: 10px">全国主要城市天气数据后台管理</h1>

<%--<form action="WeatherSearchServlet" method="post" align="center">--%>
<%--    城市名称：<input type="text" name="cityName"/>--%>
<%--    <input type="submit" value="搜索"/>--%>
<%--</form>--%>
<div class="plan_box">
    <table width="100%" align="center" border="1" cellpadding="0" >
        <tr>
            <td align="center"><a href="WeatherDisplayServlet" >返回首页</a></td>
            <td colspan="9" align="center" style="font-size: 20px">城市实时天气</td>
            <td align="center"><a href="weatherAdd.jsp" >添加天气数据</a></td>
        </tr>
        <tr align="center" style="height: 30px">
            <th>🛰️城市编码</th><th>⚓️城市名称</th><th>日期</th><th>星期</th>
            <th>🚩天气</th><th>🚢风力</th><th>风向</th><th>最高温度</th>
            <th>最低温度</th><th>更新时间</th><th>操作</th>
        </tr>
        <%-- 使用JSTL进行循环遍历 --%>
        <%--@elvariable id="weatherList" type="java.util.List"--%>
        <c:forEach items="${weatherList}" var="weather">
            <tr align="center">
                <td>${weather.cityId}</td>
                <td>${weather.city}</td>
                <td>${weather.forecastDate}</td>
                <td>${weather.forecastWeek}</td>
                <td>${weather.nowWeather}</td>
                <td>${weather.nowWindClass}</td>
                <td>${weather.nowWindDir}</td>
                <td>${weather.forecastHigh}℃</td>
                <td>${weather.forecastLow}℃</td>
                <td>${weather.nowUptime}</td>
                <td>
                    <a href="WeatherQueryServlet?cityId=${weather.cityId}">修改</a>
                    <a href="WeatherDeleteServlet?cityId=${weather.cityId}"
                       onclick="return confirm('你确定要删除 ${weather.city} 吗?')">删除</a>
                </td>
            </tr>
        </c:forEach>
        <td colspan="13" align="center"> <a href="WeatherDisplayServlet?pageNum=1">返回首页</a></td>
    </table>
</div>
<script>
    WIDGET = {
        "CONFIG": {
            "modules": "01243",
            "background": "1",
            "tmpColor": "FFFFFF",
            "tmpSize": "16",
            "cityColor": "FFFFFF",
            "citySize": "16",
            "aqiColor": "FFFFFF",
            "aqiSize": "18",
            "weatherIconSize": "24",
            "alertIconSize": "18",
            "padding": "10px 10px 10px 10px",
            "shadow": "2",
            "language": "auto",
            "borderRadius": "5",
            "fixed": "true",
            "vertical": "top",
            "horizontal": "left",
            "key": "20a0d38bd1f94f94ad0aafbe54043dab"
        }
    }
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
</body>
<footer align="center">
    <p>Copyright &copy;2023  Natural-Pride. JavaWeb & WebDesign</p>
    <p>All rights reserved</p></footer>
</html>
